<template>
    <div>
        <div class="navbar">
            <van-nav-bar
                title="商品详情"
                left-text="返回"
                left-arrow
                @click-left="onclickleft"
            />
        </div>
        <div class="topImage">
            <img :src="goodsInfo.IMAGE1" width="100%">
        </div>
        <div class="goods-name">{{goodsInfo.NAME}}</div>
        <div class="goods-price">￥{{goodsInfo.PRESENT_PRICE | filterMoney}}</div>
        <div>
            <van-tabs sticky swipeable>
                <van-tab title="商品详情">
                    <div class="detai" v-html="goodsInfo.DETAIL"></div>
                </van-tab>
                <van-tab title="评价">
                    正在制作中
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import url from '@/serverApi.config.js'
    import { Toast } from 'vant'
    import { toMoney } from '@/components/js/filter/moneyFilter.js'
    export default {
        data() {
            return {
                goodsId: '',
                goodsInfo: {}
            }
        },
        created () {
            this.goodsId = this.$route.query.goodsId
            this.getGoodDetail()
        },
        methods: {
            getGoodDetail () {
                axios({
                    url: url.checkGoodSDetail,
                    method: 'post',
                    data: {
                        goodsId: this.goodsId
                    }
                }).then(res => {
                    if(res.data.code === 200 && res.data.message) {
                        this.goodsInfo = res.data.message 
                    } else {
                        Toast('服务器出差了')
                    }
                }).catch(err => {
                    Toast('服务器出差了')
                })
            },
            onclickleft(){
                this.$router.go(-1)
            }
        },
        filters: {
            filterMoney (price) {
                return toMoney(price)
            }
        }
    }
</script>

<style scoped>
    .goods-name, .goods-price{
        background-color: #fff;
        text-align: center
    }
    .detai{
        font-size: 0;
    }
</style>